<template>
	<layout :isVertical="true" :style="{width: screenWidth+'px',height:screenHeight+'px'}" style="margin: 0 auto;">
		<layout layout="top" height="70px">
			<head-top v-if="!this.requireOA"></head-top>
			<!-- <head-top v-if="this.requireOA"></head-top> -->

		</layout>
		<layout layout="center">
			<layout>
				<!--<layout layout="aside" width="201px">

                </layout>-->
				<nav-menu v-if="!this.requireOA" @listisc="isCollapseattr"></nav-menu>
				<!-- <nav-menu v-if="this.requireOA" @listisc="isCollapseattr"></nav-menu> -->

				<layout layout="center"  style="overflow-y: hidden;overflow-x: auto;">
					<transition name="fade" mode="out-in">
						<keep-alive>
							<router-view v-if="$route.meta.keepAlive"></router-view>
						</keep-alive>
					</transition>
					<transition name="fade" mode="out-in">
						<router-view v-if="!$route.meta.keepAlive"></router-view>
					</transition>
					<!--全局监听浮动窗口-->
					<div class="fixUploadWindow" id="fixUploadWindow" v-show="isShow">
						<div class="auditBtn" @click="toUpload()">
							{{process}}%
						</div>
					</div>
				</layout>
			</layout>
		</layout>
	</layout>
</template>

<script lang="ts">
    import Vue from 'vue';
    import Component from 'vue-class-component';
    import headTop from '../components/head/headTop.vue';
    import navMenu from '../components/nav/navMenu.vue';
    import { State, Getter, Action, Mutation, namespace } from 'vuex-class';
    Component.registerHooks([
        'beforeRouteEnter',
        'beforeRouteLeave',
        'beforeRouteUpdate'
    ]);
    @Component({
        components:{
            headTop,
            navMenu
        }
    })
    export default class appMain extends Vue{
        @State isShowLoad: number;
        @State isShow :boolean;
        @Getter GET_isShowLoad: boolean;
        @State process :number;
        @Mutation('SET_isShow') SET_isShow: () => void;
        companyShow: boolean;
        requireOA:any;
        foot:string;
        sysUserName: string;
        sysUserId: string;
        logining: boolean;
        resData : any = {};
        checked: boolean;
        isCollapse:boolean=false;
        screenWidth= document.body.clientWidth, // 屏幕尺寸
        screenHeight= document.body.clientHeight, // 屏幕尺寸
        constructor(){
            super();
            this.requireOA = null;
			this.foot = '@copyright 版权归所有';
			this.sysUserName = '';
            this.sysUserId = '';
            this.logining = false;
            this.resData = {};
            this.checked = true;
        };
        isCollapseattr(istrue){           
               this.isCollapse = istrue;
        };
        toUpload() {
            window.sessionStorage.setItem('uploadWay', '1');
            // this['$router'].push({path: '/fileArrange/cloudManagement'});
			// 测试用
            this['$router'].push({path: '/common/uploadExample/uploadExample'});
        };

        created(){
            this.requireOA = this.$router.options.routes[0].meta.requireAuth;
			if(this.requireOA){
                // this.$router.push({
                //      path:'/login/login'
                //   });
                 this.$router.push({
                     path:'/home/home'
                  });
			}
        };
        mounted(){
        };
        computed(){
            if(this.process>=100){
				this['$store'].commit('SET_isShow', false)
			}
		};
    }
</script>

<style lang="scss" scoped>
	@import '../styles/index.scss';
</style>